<template>
    <el-drawer append-to-body v-model="drawer" :title="`出库主单【${masterInfo.workOrderNo}】的明细详情`" direction="rtl"
        size="72%">
        <wms-form v-model:query-params="queryParams" :form-list="formList" @query="getList" label-width="80px"
            @export="handleExport">
            <el-col :span="1.5">
                <el-button type="success" plain icon="Setting" :disabled="!selectedRow" @click="stockPrepare"
                    v-hasPermi="['wms:obMaster:stock-prepare']">手动备货
                </el-button>
            </el-col>
        </wms-form>
        <wms-table class="table-click" :loading="loading" :data-list="obDetailsList" :column="column"
            :pageInfo="queryParams" @get-list="getList" @row-click="handleRowClick"
            @selection-change="selectionChange" />
        <ob-task v-if="showTask" v-model="showTask" :details-info="detailsInfo" />
        <!-- 配货弹窗 -->
        <allocation-dialog v-if="dialogVisible" v-model="dialogVisible" :selected-order="selectedRow"
            @confirm="handleConfirmAllocation" />
    </el-drawer>
</template>

<script setup name="ObDetails">
import AllocationDialog from './allocationDialog/index.vue'
import WmsTable from '@/components/WmsTable/index.vue'
import WmsForm from '@/components/WmsForm/index.vue'
import ObTask from './obTask/index.vue'
import { listObDetails, getObDetails, delObDetails, addObDetails, updateObDetails } from "@/api/wms/obDetails";
import { data, column, formList } from './index.js'
import { reactive, ref, getCurrentInstance } from 'vue'

const props = defineProps({
    masterInfo: {
        type: Object,
        require: true
    }
})
let drawer = defineModel()
const queryParams = reactive(data.queryParams);

const { proxy } = getCurrentInstance();

const obDetailsList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
/** 查询出库明细单列表 */
function getList() {
    console.log('调用出库明细组件,props.masterInfo', props.masterInfo);
    queryParams.obMasterId = props.masterInfo.obMasterId
    loading.value = true;
    listObDetails(proxy.addDateRange(queryParams, queryParams.dateRange)).then(response => {
        obDetailsList.value = response.rows;
        queryParams.total = response.total;
        loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    queryParams.dateRange = [];
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download('wms/obDetails/export', {
        ...queryParams
    }, `obDetails_${new Date().getTime()}.xlsx`)
}

const selectedRow = ref(null);

// 多选框选中数据
function selectionChange(selection) {
    console.log("选中的数据:", selection);
    selectedRow.value = selection
}
const dialogVisible = ref(false);
function stockPrepare() {
    dialogVisible.value = true;
}

let showTask = ref(false)
let detailsInfo = ref({
    obMasterId: null,
    obDetailId: null
})

const handleRowClick = (row) => {
    showTask.value = true
    detailsInfo.value.obMasterId = row.obMasterId
    detailsInfo.value.obDetailId = row.obDetailId
}

const handleConfirmAllocation = (allocationResult) => {
    getList()
}

getList();
</script>
